
<!-- 资产管理 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>资产管理</div>
            <div style="margin-left: auto;">
                <el-button  size="mini" type="primary" @click="handlerAdd()">添加</el-button>
            </div>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="assetsId" label="资产id" align="center">
                </el-table-column>
                <el-table-column prop="assetsName" label="资产名称" align="center">
                </el-table-column>
                <el-table-column label="资产所在小区" align="center">
                    <template slot-scope="scope">
                        {{scope.row.estateText}}
                    </template>
                </el-table-column>
                <el-table-column prop="assetsText" label="资产类别" align="center">
                </el-table-column>
                <el-table-column prop="assetsSourceText" label="资产来源" align="center">
                </el-table-column>
                <el-table-column prop="assetsBuyTime" label="资产购入时间" align="center" width="180">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 表单弹出框 -->
        <div>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="130px"
                    class="demo-ruleForm">
                    <el-form-item label="资产类型名称" prop="assetsName">
                        <el-input v-model="ruleForm.assetsName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="资产购入时间" prop="assetsBuyTime">
                        <el-date-picker v-model="ruleForm.assetsBuyTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="资产来源" prop="assetsSource">
                        <el-select v-model="ruleForm.assetsSource" placeholder="请选择资产来源">
                            <el-option v-for="item in assetsSourceOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资产类别" prop="assetsTypeId">
                        <el-select v-model="ruleForm.assetsTypeId" placeholder="请选择资产类别">
                            <el-option v-for="item in AssetsType" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在小区" prop="estateId">
                        <el-select v-model="ruleForm.estateId" placeholder="请选择所在小区">
                            <el-option v-for="item in cellID" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getAssets, getAssetsSave, getAssetsDel, getAssetsType, getEstate } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {

  data () {
    return {
      assetsSourceOptions: commonData.assetsSourceOptions,
      dialogFormVisible: false,
      title: '添加',
      total: 10,
      page: 1,
      limit: 10,
      tableData: [],
      AssetsType: [],
      cellID: [],
      ruleForm: {
        assetsName: '', // 资产名称
        assetsBuyTime: '', // 资产购入日期
        assetsSource: '', // 资产来源 0、购入，1自建 2 租赁 3 其他
        assetsTypeId: '', // 资产类别
        estateId: '' // 小区id
      },
      rules: {
        assetsName: { required: true, message: '请输入资产名称', trigger: 'blur' },
        assetsBuyTime: { required: true, message: '请选择购入日期', trigger: 'blur' },
        assetsSource: { required: true, message: '请选择资产来源', trigger: 'blur' },
        assetsTypeId: { required: true, message: '请选择资产类别', trigger: 'blur' },
        estateId: { required: true, message: '请选择小区', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getDeviceId()
    setTimeout(() => {
      this.gitList()
    }, 1);
  },
  methods: {
    // 获取
    gitList () {
      const data = {
        page: this.page,
        size: this.limit
      }
      getAssets({ ...data }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records.map(item => {
            const assetsBuyTime = commonFunction.getTimeFormat(+new Date(item.assetsBuyTime), 'YYYY-MM-DD hh:mm:ss')
            let assetsText
            let estateText
            let assetsSourceText
            this.AssetsType.forEach(ite => {
              if (item.assetsTypeId == ite.value) {
                assetsText = ite.label
              }
            })
            this.cellID.forEach(ite => {
              if (item.estateId == ite.value) {
                estateText = ite.label
              }
            })
            this.assetsSourceOptions.forEach(ite => {
              if (item.assetsSource == ite.value) {
                assetsSourceText = ite.label
              }
            })
            return {
              ...item,
              assetsBuyTime,
              assetsText,
              estateText,
              assetsSourceText
            }
          })
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取设备id
    getDeviceId () {
      const data = {
        size: 999,
        page: 1
      }
      getAssetsType(data).then(res => {
        if (res.code === 0) {
          const { records } = res.page
          this.AssetsType = records.map(item => {
            const value = item.assetsTypeId
            const label = item.assetsTypeName
            return {
              value,
              label
            }
          })
        }
      })
      // 获取所有小区信息
      getEstate().then(res => {
        if (res.code == 0) {
          this.cellID = res.list.map(item => {
            const value = item.estateId
            const label = item.estateName
            return {
              value,
              label
            }
          })
        }
      })
    },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            assetsId: this.ruleForm.assetsId ? this.ruleForm.assetsId : null,
            ...this.ruleForm
          }
          getAssetsSave(data).then(res => {
            if (res.code == 0) {
              this.ruleForm = {
                assetsName: '', // 资产名称
                assetsBuyTime: '', // 资产购入日期
                assetsSource: '', // 资产来源      0、购入，1自建 2 租赁 3 其他
                assetsTypeId: '', // 资产类别
                estateId: '' // 小区id
              }
              this.$message.success(data.assetsId != null ? '编辑成功' : '添加成功')
              this.gitList()
              this.dialogFormVisible = false
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    handlerAdd () {
      this.ruleForm = {
        assetsName: '', // 资产名称
        assetsBuyTime: '', // 资产购入日期
        assetsSource: '', // 资产来源      0、购入，1自建 2 租赁 3 其他
        assetsTypeId: '', // 资产类别
        estateId: '' // 小区id
      },
      this.title = '添加'
      this.dialogFormVisible = true
    },
    // 编辑
    handleEdit (row) {
      this.title = '编辑'
      this.dialogFormVisible = true
      this.ruleForm = {
        assetsId: row.assetsId,
        ...row,
        assetsSource: row.assetsSource + ''
      }
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          assetsId: row.assetsId
        }
        getAssetsDel({ ...data }).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功')
            this.gitList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.limit = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #DCDFE6;
}

.content-row {
    overflow: hidden;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
